<script setup lang="ts">

import {onMounted} from "vue";


import H5Typewriter from "../../components/my/H5Typewriter.vue";

import AOS from "aos";

onMounted(()=>{
  AOS.init();
})

const text = "今天天气很好！";
</script>

<template>
  <div class="page">
    <H5Typewriter :text="text" />
    <img class="image" data-aos="fade-up" src="../../assets/guide/2208-3.jpg" alt="" />
    <!-- <img class="image run_top_right" src="../../assets/guide/2208-3.jpg" alt="" /> -->
  </div>
</template>

<style lang="scss" scoped>
.image {
  width: 50px;
  height: 100px;
}
//定义动画的流程
.run_top_right {
  animation: run-right-top 3s 0.4s cubic-bezier(.09,.9,1,-0.1);
  animation-fill-mode: forwards;
}

//向上走的动画初始及结尾值
@keyframes run-right-top {
  0% {
    top: 10px;
  }

  100% {
    top: 500px;
  }
}
</style>
